<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>2.组件的基本使用</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
	<!-- 
			Vue中使用组件的三大步骤：
						第一步：定义组件（创建组件）
						第二步：注册组件（React中没有这一步，Vue中独有）
						第三步：使用组件（编写组件标签）

			第一步：如何定义组件（创建组件）？—— 使用Vue.extend(options)方法
						 	其中的options和new Vue(options)几乎一样，但也有点小区别：
							 			1.组件配置中不能写：el配置，为什么？—— 由vm去决定服务哪个容器，组件跟着走就ok了;
										2.组件配置中data必须写成函数，为什么？ —— 避免组件复用时产生数据的干扰;
			第二步：如何注册组件？
							第一种（局部注册）new Vue({...})时，使用components配置项
							第二种（全局注册）Vue.component('组件名',具体的组件)

			第三步：如何使用组件？—— 编写组件标签即可，例如：<Person></Person> 或 <Person/> 
	-->
		<!-- 准备好一个容器-->
		<div id="demo"></div>

		<script type="text/javascript">
			//阻止 vue 在启动时生成生产提示。
			Vue.config.productionTip = false

			//第一步：定义组件（创建组件）—— Person组件
			let Person = Vue.extend({
				template:`
					<div>
						<h1>人员信息</h1>
						<h3>姓名：{{pname}}</h3>
						<h3>年龄：{{age}}</h3>
						<button @click="showPersonInfo">点我提示个人信息</button>
					</div>
				`,
				data(){
					return {
						pname:'龙哥',
						age:18
					}
				},
				methods:{
					showPersonInfo(){
						alert(`我叫：${this.pname}，我今年：${this.age}岁了`)
					},
				}
			})

			//第一步：定义组件（创建组件）—— School组件
			let School = Vue.extend({
				template:`
					<div>
						<h1>学校信息</h1>
						<h3>校名：{{sname}}</h3>
						<h3>地址：{{address}}</h3>
						<button @click="showSchoolInfo">点我提示学校信息</button>
					</div>
				`,
				data(){
					return {
						sname:'尚硅谷',
						address:'宏福科技园'
					}
				},
				methods:{
					showSchoolInfo(){
						alert(`${this.sname}，坐落于：${this.address}`)
					}
				}
			})
			
			//创建一个vm —— 整个应用的“大哥”，领导着所有的组件。
			new Vue({
				el:'#demo',
				//第二步：注册组件
				components:{Person,School},
				//第三步：使用组件（编写组件标签）
				template:`
					<div>
						<Person/>
						<hr>
						<School/>
					</div>
				`
			})
		</script>
	</body>
</html>